<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>冒泡和捕获</title>
		<style>
			body * {
				margin: 10px;
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<!-- 冒泡：当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先的处理程序。 -->
		<!-- 点击 P 元素，事件一路向上触发，这个过程称为“冒泡”。 -->

		<form onclick="alert('form')">
			FORM
			<div onclick="alert('div')">
				DIV
				<p onclick="alert('p')">P</p>
			</div>
		</form>
	</body>
</html>
